/**
 * 标签管理类
 * 负责处理标签的切换
 */
export class TabManager {
    private tabButtons: NodeListOf<HTMLButtonElement>;
    private tabContents: NodeListOf<HTMLDivElement>;
    private requestTabs: NodeListOf<HTMLButtonElement>;
    private requestContents: NodeListOf<HTMLDivElement>;
    private responseTabs: NodeListOf<HTMLButtonElement>;
    private responseContents: NodeListOf<HTMLDivElement>;

    constructor() {
        // 获取DOM元素
        this.tabButtons = document.querySelectorAll('.tab');
        this.tabContents = document.querySelectorAll('.tab-content');
        this.requestTabs = document.querySelectorAll('.request-tab');
        this.requestContents = document.querySelectorAll('.request-content');
        this.responseTabs = document.querySelectorAll('.response-tab');
        this.responseContents = document.querySelectorAll('.response-content');

        this.setupEventListeners();
    }

    /**
     * 设置事件监听器
     */
    private setupEventListeners(): void {
        // 标签切换
        this.tabButtons.forEach(button => {
            button.addEventListener('click', () => this.switchTab(button.id));
        });

        // 请求标签切换
        this.requestTabs.forEach(tab => {
            tab.addEventListener('click', () => this.switchRequestTab(tab.dataset.tab as string));
        });

        // 响应标签切换
        this.responseTabs.forEach(tab => {
            tab.addEventListener('click', () => this.switchResponseTab(tab.dataset.tab as string));
        });
    }

    /**
     * 切换标签
     * @param tabId 标签ID
     */
    public switchTab(tabId: string): void {
        console.log('切换到标签:', tabId);
        
        // 更新标签按钮状态
        this.tabButtons.forEach(button => {
            button.classList.toggle('active', button.id === tabId);
        });

        // 映射标签ID到内容ID
        const tabContentMapping: Record<string, string> = {
            'tab-current': 'current-request',
            'tab-requests': 'requests-request',
            'tab-saved': 'saved-requests'
        };

        // 获取内容ID
        const contentId = tabContentMapping[tabId] || '';
        
        // 更新标签内容
        this.tabContents.forEach(content => {
            content.classList.toggle('active', content.id === contentId);
        });
        
        // 打印当前活动的标签内容
        console.log('激活的标签内容:', Array.from(document.querySelectorAll('.tab-content.active')).map(el => el.id));
    }

    /**
     * 切换请求标签
     * @param tabId 标签ID
     */
    public switchRequestTab(tabId: string): void {
        // 更新标签按钮状态
        this.requestTabs.forEach(tab => {
            tab.classList.toggle('active', tab.dataset.tab === tabId);
        });

        // 更新标签内容
        this.requestContents.forEach(content => {
            content.classList.toggle('active', content.id === `${tabId}-content`);
        });
    }

    /**
     * 切换响应标签
     * @param tabId 标签ID
     */
    public switchResponseTab(tabId: string): void {
        // 更新标签按钮状态
        this.responseTabs.forEach(tab => {
            tab.classList.toggle('active', tab.dataset.tab === tabId);
        });

        // 更新标签内容
        this.responseContents.forEach(content => {
            content.classList.toggle('active', content.id === `${tabId}-content`);
        });
    }
} 